<template>
  <div class="container" catchtouchmove="preventTouchMove"> 
   <div class="content" v-show="contentShow">
     <img src="http://ciy.oss-cn-shenzhen.aliyuncs.com/web/share/share_top.png" class="titleImg"/>
     <input type="text" class="nameInput input" placeholder="请输入你的名字" v-model="realname"/>
     <textarea placeholder="写下你的回忆" class="memoryInput input" v-model="user_desc" fixed="true"></textarea>
     <span class="tipInput ">请输入内容150字以内,已输入{{ziNumber}}字</span>
     <span class="commitBtn" @click="commit">提交内容,保存助力二维码</span>
   </div>
   <div v-show="!contentShow" class="content content1" @click="save">
     <canvas  canvas-id="canvas"></canvas>
   </div>
   <div v-show="!contentShow" class="tis">长按图片保存，分享朋友圈助力</div>
   <img src="http://file.rzkeji.com/web/loveciy/img/close.png" class="close" @click="close"/>
  </div>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      content:'',
      user_desc:"",
      realname:"",
      contentShow:true,
      qrcodeList:[],
      canvasImg:"",
    }
  },
  computed:{
    listId(){
      return this.$store.state.modulesLuck.listId;
    },
    luckData(){
      return this.$store.state.modulesLuck.luckData
    },
    ziNumber(){
      return this.user_desc.length;
    }
  },
  methods:{
    preventTouchMove(){},
    close(){
      this.$store.dispatch('setCommitBtn',false)
    },
    async commit(){
      wx.showLoading({
        title:'合成二维码中...'
      })
      var userToken=wx.getStorageSync('userToken');
      var _this=this;
      let res=await this.$api.setUserDesc({ad_id:this.listId,user_token:userToken,realname:this.realname,user_desc:this.user_desc})
	  
	  if(res.data.level=='success'){
        this.qrcodeList=res.data.data;
        this.contentShow=false;
        this.drawQrcode();
      }else{
        this.$currency.showToast('生成失败!','none',"");
      }
    },
    drawQrcode(){
      var imgSrc="";
      var qrcodeSrc="";
      var _this=this;
      var rpx;
      wx.getSystemInfo({
        success(res){
          rpx=res.windowWidth/375;
        }
      })
      wx.getImageInfo({
        src:_this.qrcodeList.qrcode_img_url,
        success(res){
          qrcodeSrc=res.path;
          wx.getImageInfo({
            src:_this.qrcodeList.img_url,
            success(res){
              imgSrc=res.path;
              var context = wx.createCanvasContext('canvas');
              context.fillStyle = "white"
              context.fillRect(0, 0, 295.5*rpx, 480*rpx);
              context.fillStyle = "black"
              // context.strokeStyle  = "#fff"
              context.drawImage(imgSrc,32*rpx,70*rpx,230*rpx,145*rpx);
              context.setFontSize(12*rpx);
              context.fillText(_this.qrcodeList.school_name_en==null? " " :_this.qrcodeList.school_name_en,32*rpx,32.5*rpx)

              context.setFontSize(14*rpx);
              context.fillText(_this.qrcodeList.school_name_zh==null? " " :_this.qrcodeList.school_name_zh,32*rpx,55*rpx);

              context.setFontSize(14*rpx);
              context.fillText(_this.qrcodeList.realname==null? " " :'@'+_this.qrcodeList.realname+':',32*rpx,254.5*rpx);
              // context.setFontSize(14*rpx);
              context.fillText(_this.qrcodeList.realname==null? " " :'@'+_this.qrcodeList.realname+':',31.5*rpx,255*rpx);
              context.setFontSize(11*rpx);
              _this.textBr(_this.qrcodeList.user_desc==null? " " :_this.qrcodeList.user_desc,context,280*rpx)
              context.setStrokeStyle("#333333");
              context.setLineWidth(0.5*rpx);
              context.moveTo(32*rpx,400*rpx);
              context.lineTo(262*rpx,400*rpx);
              context.stroke();
              context.setFontSize(12*rpx);
              _this.textBr(_this.qrcodeList.share_desc==null? " " :_this.qrcodeList.share_desc,context,430*rpx)
              context.drawImage(qrcodeSrc,210*rpx,410*rpx,55*rpx,62*rpx);
              context.draw(false,(e)=>{
                  _this.drawImage()
              });
            }
          })
        }
      })
    },
    drawImage(){
      var _this=this;
      var userToken=wx.getStorageSync('userToken');
      wx.canvasToTempFilePath({
        canvasId:'canvas',
        destWidth:"1000",
        // destHeight:"1624",
        destHeight:"1674",
        fileType:'jpg',
        quality:1,
         success(res){
          _this.canvasImg=res.tempFilePath;
          wx.hideLoading()
          wx.uploadFile({
            url:`${this.$api.BASE_URL}activity/save-active-draw-shareimg`,
            filePath: _this.canvasImg,
            name:"photo",
            formData:{
              user_token:userToken,
              id:_this.listId,
            }
          })
        },
        fail(err){
          console.log(err)
        }
      })
    },
    textBr(value,context,top){
        var rpx;
        wx.getSystemInfo({
            success(res){
                rpx=res.windowWidth/375;
            }
        })

      var str=value;
      var rpx;
      wx.getSystemInfo({
        success(res){
          rpx=res.windowWidth/375;
        }
      })
      var strArr=value.split('\n');
      var canvasWidth = 220.5*rpx;
      // var canvasWidth = 295.5;
      var initHeight=top;
      for(var j=0;j<strArr.length;j++){
        var lastSubStrIndex= 0;
        var lineWidth = 0;
        for(let i=0;i<strArr[j].length;i++){ 
          lineWidth+=context.measureText(strArr[j][i]).width; 
          if(lineWidth>canvasWidth){  
            context.fillText(strArr[j].substring(lastSubStrIndex,i+1),32,initHeight);//绘制截取部分
            initHeight+=16;//20为字体的高度
            lineWidth=0;
            lastSubStrIndex=i+1;
          } 
          if(i==strArr[j].length-1){//绘制剩余部分
            context.fillText(strArr[j].substring(lastSubStrIndex,i+1),32,initHeight);
          }
        }
      initHeight+=16*rpx;
      // console.log(initHeight)
      }   
    },
    save(){
      var _this=this
        wx.showLoading({
            title:'分享图片正在下载...'
        }),
      wx.saveImageToPhotosAlbum({
        filePath:_this.canvasImg,
        success(res){
            wx.hideLoading()
          if(res.errMsg.indexOf('ok')!=-1){
            _this.$currency.showToast('保存成功，请在手机相册中查看','none',"")
          }
        },
        fail(err){
            wx.hideLoading()
          console.log(err)
        }
      })
    }
  }
}
</script>

<style scoped>
.container{width: 100%;height:100vh;background-color: rgba(51,51,51,0.5);position: fixed;left: 0;top: 0;z-index: 102}
.content{width:297.5px;height: 400.5px; background-color:#fff;margin: 50px auto; padding: 17px 0px;margin-bottom: 0px;position: relative;}
/*.content1{width:295.5px;padding: 0;height: 480px;margin: 20px auto;margin-bottom:10px;}*/
.content1{width:295.5px;padding: 0;height: 480px;margin: 20px auto;margin-bottom:0}
.titleImg{width: 83px;height: 25px;margin: 0 auto;display: block;}
.input{width: 74.7%;border-radius: 8px;line-height: 24px;color: #999999;margin: 17px auto;border:0.5px solid #CCCCCC;padding: 2%}
.nameInput{height: 24px;font-size:12px;}
.memoryInput{height: 218px;font-size:11px;position: static}
.tipInput{margin: 5px auto;display: block;font-size:9px;width: 74.7%;border-radius: 8px;color: #999999;}
.commitBtn{width: 165px;height: 24.5px;border-radius: 10px;color: #fff;background-color: #333333;font-size: 12px;margin: 20px auto;display: block;text-align: center;line-height: 24.5px;}
.close{width: 30px;height: 30px;display: block;margin:5px auto;}
canvas{width: 295.5px; height:480px;}
.tis{background-color:rgbd(3,0,0,0.8);width:591rpx;margin:0 auto;font-size:26rpx;text-align:center;color:#fff;}
</style>